<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style type="text/css">
  .switch {
      width: 57px;
      height: 28px;
      position: relative;
      border: 1px solid #dfdfdf;
      background-color: #DCDFE6;
      border-radius: 20px;
      appearance: none;
  }
  .switch::before {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      background-color: #FFFFFF;
      border-radius: 50%;
      left: 2px;
      top: 0;
      bottom: 0;
      margin: auto;
      transition: .3s;
  }
  .switch:checked {
      background-color: #409EFF;
      transition: .6s;
  }
  .switch:checked::before {
      left: 30px;
      transition: .3s;
  }
</style>
</html>
<input type="checkbox" class="switch" checked />

  <!-- 1. instansof -->
  <script>
    const myInstance = (target, origin) => {
      // getPrototypeOf 返回指定对象的原型
      let proto = Object.getPrototypeOf(target);
      const prototype = origin.prototype;
      while (true) {
        if(!proto) return false;
        if(proto === prototype) return true;
        proto = Object.getPrototypeOf(proto)
      }
    }
    function myPuppy() {}
    const people1 = new Object();
    const people2 = new myPuppy();
    console.log(myInstance(people1, Object));
    console.log(myInstance(people1, myPuppy));
  </script>

  <!-- new -->
  <script>
    function myNew() {
      const obj = Object.create(null);
      const constructor = [].shift.call(arguments);
      obj.__proto__ = constructor.prototype;
      let result = constructor.apply(obj, arguments);
      return typeof result === "object" ? result : obj;
    }

    function myFn() {
      this.a = 1;
    }
    const o1 = myNew(myFn);
    console.log(o1.a);
  </script>

  <!-- 防抖 某个函数在短时间内只执行最后一次-->
  <script>
    function debounce(fn, delay = 500) {
      let timer = null;
      return function () {
        if(timer) {
          clearTimeout(timer);
        };
        timer = setTimeout(() => {
          timer = null;
          fn.apply(this, arguments)
        }, delay)
      }
    }
  </script>

   <!-- 节流 某个函数在指定时间段内只执行第一次，直到指定时间段结束，周而复始-->
   <script>
    // 使用定时器写法，delay毫秒后第一次执行，第二次事件停止触发后依然会再一次执行
    // 可以结合时间戳 实现更准确的节流
    function throttle(fn, delay = 500) {
      let timer = null;
      return function () {
        if(timer) return;
        timer = setTimeout(() => {
          timer = null;
          fn.apply(this, arguments)
        }, delay)
      }
    }
    
    function throttle(fn, delay) {
        let start = +Date.now()
        let timer = null
        return function(...args) {
            const now = +Date.now()
            if (now - start >= delay) {
                clearTimeout(timer)
                timer = null
                fn.apply(this, args)
                start = now
            } else if (!timer){
                timer = setTimeout(() => {
                    fn.apply(this, args)
                }, delay)
            }
        }
    }
  </script>
</body>
</html>